<ul [nzMode]="'horizontal'" nz-menu>
    <ng-container *ngFor="let menu of menus;">
        <li #menu2 *ngIf="menu.openType !== 'OPEN'"
            [routerLink]="menu.routerLink"
            class="ant-menu-item"
            nz-menu-item routerLinkActive="ant-menu-item-selected"
        >
            {{menu.name}}
        </li>
        <li #menu2
            (click)="openMenu(menu)"
            *ngIf="menu.openType === 'OPEN'" class="ant-menu-item"
        >
            {{menu.name}}
        </li>
    </ng-container>

    <nz-dropdown *ngIf="subMenus.length > 0 && subMenus.length !== this.menus.length" [(nzVisible)]="subMenusColor2"
                 [nzTrigger]="'click'"
                 nzBackdrop="false">
        <div
            [class.dropDownIcon]="subMenusColor2"
            class="dropUpIcon"
            nz-dropdown
        >
            <i nz-icon nzType="dr:other_yw" style="font-size: 16px;" theme="fill"></i>
        </div>
        <ul nz-menu>
            <li *ngFor="let menu of subMenus; let index = index;" nz-menu-item routerLink="{{menu.routerLink}}">
                {{menu.name}}
            </li>
        </ul>
    </nz-dropdown>

    <li (click)="backToParent()"
        *ngIf="showBack"
        nz-menu-item>
        <i nz-icon nzType="dr:back_yw" style="font-size: 16px" theme="fill"></i>
    </li>

    <div class="drop-lb"></div>

    <nz-dropdown
        (nzVisibleChange)="visibleChange($event)"
        [(nzVisible)]="settingsColor2"
        [nzTrigger]="'click'"
        nzBackdrop="false">
        <div [class.dropDownIcon]="settingsColor2" class="dropUpIcon userDrop" nz-dropdown>
            <span title="修改用户资料">{{sessionUser.userName}}</span>
            <span (click)="changeDeptClick($event)"
                  *ngIf="sessionUser.mainDeptName"
                  title="切换部门">【{{sessionUser.mainDeptName}}】</span>
            <i nz-icon nzType="caret-down" theme="outline"></i>
        </div>
        <ul nz-menu>
            <ng-container *ngIf="showModifyList">
                <li (click)="showModifyUser = true" nz-menu-item>
                    <i nz-icon nzType="dr:edit_yw" style="font-size: 16px;" theme="fill"></i>
                    修改资料
                </li>
                <li (click)="showModifyPassword = true" nz-menu-item>
                    <i nz-icon nzType="dr:hy-modify-password" style="font-size: 16px;" theme="fill"></i>
                    修改密码
                </li>
                <li (click)="signOut()" nz-menu-item>
                    <i nz-icon nzType="dr:exit_yw" style="font-size: 16px;" theme="fill"></i>
                    退出系统
                </li>
            </ng-container>
            <ng-container *ngIf="! showModifyList">
                <ng-container *ngFor="let dept of depts">
                    <li (click)="changeDept(dept.orgId)" nz-menu-item>
                        {{dept.orgName}}
                    </li>
                </ng-container>
            </ng-container>
        </ul>
    </nz-dropdown>
</ul>

<ng-container *ngIf="showModifyUser">
    <ou-user-modify
        (eventClose)="showModifyUser = false"
        [record]="record">
    </ou-user-modify>
</ng-container>

<ng-container *ngIf="showModifyPassword">
    <ou-password-modify
        (eventClose)="showModifyPassword = false"
    >
    </ou-password-modify>
</ng-container>
